# Context

<EpicVideo url="https://www.epicreact.dev/workshops/react-performance/context" />

👨‍💼 We now have a counter inside the `App` component and every time that count is
incremented, we trigger a rerender of the `Footer` component! Have we lost the
ability to take advantage of React's element optimization? No!

Instead of accepting the `color` via props, we can place it in a context provider
that the `Footer` can consume. And with that, the `footer` no longer accepts any
dynamic props so we can move it outside the `App` component again, which means
the only way it can be rerendered is if the context changes (which is exactly
what we want).

When you're done, make certain that the `Footer` only rerenders when the `color`
changes and not when the counters are incremented.
